<template>
  <div class="permission-list">
    <h1 class="page-title">权限管理</h1>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon menu-icon"><Menu /></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.menuCount }}</div>
              <div class="stat-label">菜单权限</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon button-icon"><SetUp /></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.buttonCount }}</div>
              <div class="stat-label">按钮权限</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon api-icon"><Connection /></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.apiCount }}</div>
              <div class="stat-label">接口权限</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon total-icon"><Files /></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.totalCount }}</div>
              <div class="stat-label">权限总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 权限树 -->
    <el-card class="tree-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">
            <el-icon><Grid /></el-icon>
            权限结构树
          </span>
          <div class="header-actions">
            <el-button
              size="small"
              @click="expandAll"
              :icon="expanded ? 'Fold' : 'Expand'"
            >
              {{ expanded ? '折叠全部' : '展开全部' }}
            </el-button>
          </div>
        </div>
      </template>
      
      <el-tree
        ref="treeRef"
        :data="permissionTree"
        :props="{ children: 'children', label: 'name' }"
        v-loading="loading"
        :default-expand-all="expanded"
        node-key="id"
        :expand-on-click-node="false"
        class="permission-tree"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <!-- 左侧：类型和名称 -->
            <div class="node-left">
              <el-tag 
                :type="getTypeTagType(data.type)" 
                size="small"
                class="type-tag"
                effect="dark"
              >
                <el-icon class="tag-icon">
                  <component :is="getTypeIcon(data.type)" />
                </el-icon>
                {{ getTypeText(data.type) }}
              </el-tag>
              <span class="node-name">{{ data.name }}</span>
              <el-tag 
                v-if="data.code" 
                size="small" 
                type="info"
                effect="plain"
                class="code-tag"
              >
                {{ data.code }}
              </el-tag>
              <el-tag 
                v-if="data.status === 'inactive'" 
                type="danger" 
                size="small"
                effect="plain"
              >
                已禁用
              </el-tag>
            </div>

            <!-- 右侧：路径和API信息 -->
            <div class="node-right">
              <div v-if="data.path" class="path-info">
                <el-icon class="info-icon"><Link /></el-icon>
                <span class="info-text">{{ data.path }}</span>
              </div>
              <div v-if="data.apiPath" class="api-info">
                <el-tag 
                  :type="getMethodTagType(data.method)" 
                  size="small"
                  effect="dark"
                  class="method-tag"
                >
                  {{ data.method }}
                </el-tag>
                <span class="api-path">{{ data.apiPath }}</span>
              </div>
              <div v-if="data.description" class="desc-info">
                <el-icon class="info-icon"><Document /></el-icon>
                <span class="info-text desc-text">{{ data.description }}</span>
              </div>
            </div>
          </div>
        </template>
      </el-tree>
    </el-card>

    <!-- 说明卡片 -->
    <el-card class="info-card">
      <template #header>
        <span class="card-title">
          <el-icon><InfoFilled /></el-icon>
          权限说明
        </span>
      </template>
      <div class="permission-info">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-section">
              <h4>
                <el-icon><Grid /></el-icon>
                权限类型
              </h4>
              <ul>
                <li>
                  <el-tag type="primary" size="small" effect="dark">
                    <el-icon><Menu /></el-icon>
                    菜单
                  </el-tag>
                  <span>页面访问权限</span>
                </li>
                <li>
                  <el-tag type="success" size="small" effect="dark">
                    <el-icon><SetUp /></el-icon>
                    按钮
                  </el-tag>
                  <span>操作按钮权限</span>
                </li>
                <li>
                  <el-tag type="warning" size="small" effect="dark">
                    <el-icon><Connection /></el-icon>
                    接口
                  </el-tag>
                  <span>API访问权限</span>
                </li>
              </ul>
            </div>
          </el-col>
          
          <el-col :span="8">
            <div class="info-section">
              <h4>
                <el-icon><Operation /></el-icon>
                权限管理
              </h4>
              <ul>
                <li>权限数据由系统预设</li>
                <li>通过"角色管理"为角色分配权限</li>
                <li>权限树结构清晰展示层级关系</li>
                <li>支持展开/折叠查看详情</li>
              </ul>
            </div>
          </el-col>
          
          <el-col :span="8">
            <div class="info-section">
              <h4>
                <el-icon><Warning /></el-icon>
                注意事项
              </h4>
              <ul>
                <li>系统权限不建议手动修改</li>
                <li>权限分配后需重新登录生效</li>
                <li>删除角色会删除相关权限分配</li>
                <li>API权限控制接口访问</li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { permissionApi } from '@/api/role'
import {
  Menu, SetUp, Connection, Files, Grid, Link, Document, 
  InfoFilled, Operation, Warning
} from '@element-plus/icons-vue'

const loading = ref(false)
const permissionTree = ref([])
const expanded = ref(true)
const treeRef = ref(null)

// 统计数据
const statistics = reactive({
  menuCount: 0,
  buttonCount: 0,
  apiCount: 0,
  totalCount: 0
})

onMounted(() => {
  loadPermissions()
})

const loadPermissions = async () => {
  loading.value = true
  try {
    const tree = await permissionApi.getPermissionTree()
    permissionTree.value = tree || []
    calculateStatistics(tree || [])
  } catch (error) {
    console.error('加载权限列表失败:', error)
    ElMessage.error('加载权限列表失败')
  } finally {
    loading.value = false
  }
}

// 计算统计数据
const calculateStatistics = (tree) => {
  let menu = 0, button = 0, api = 0, total = 0
  
  const traverse = (nodes) => {
    nodes.forEach(node => {
      total++
      if (node.type === 'menu') menu++
      else if (node.type === 'button') button++
      else if (node.type === 'api') api++
      
      if (node.children && node.children.length > 0) {
        traverse(node.children)
      }
    })
  }
  
  traverse(tree)
  
  statistics.menuCount = menu
  statistics.buttonCount = button
  statistics.apiCount = api
  statistics.totalCount = total
}

// 展开/折叠全部
const expandAll = () => {
  expanded.value = !expanded.value
  if (treeRef.value) {
    Object.keys(treeRef.value.store.nodesMap).forEach(key => {
      treeRef.value.store.nodesMap[key].expanded = expanded.value
    })
  }
}

const getTypeTagType = (type) => {
  const types = { menu: 'primary', button: 'success', api: 'warning' }
  return types[type] || ''
}

const getTypeText = (type) => {
  const texts = { menu: '菜单', button: '按钮', api: '接口' }
  return texts[type] || type
}

const getTypeIcon = (type) => {
  const icons = { menu: 'Menu', button: 'SetUp', api: 'Connection' }
  return icons[type] || 'Document'
}

const getMethodTagType = (method) => {
  const types = {
    GET: 'success',
    POST: 'primary',
    PUT: 'warning',
    DELETE: 'danger',
    PATCH: 'info'
  }
  return types[method] || ''
}
</script>

<style scoped lang="scss">
.permission-list {
  padding: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #303133;
}

/* 统计卡片 */
.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
  
  :deep(.el-card__body) {
    padding: 20px;
  }
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 50px;
  height: 50px;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  
  &.menu-icon {
    color: #409eff;
    background: #ecf5ff;
  }
  
  &.button-icon {
    color: #67c23a;
    background: #f0f9ff;
  }
  
  &.api-icon {
    color: #e6a23c;
    background: #fdf6ec;
  }
  
  &.total-icon {
    color: #909399;
    background: #f4f4f5;
  }
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

/* 权限树卡片 */
.tree-card {
  margin-bottom: 20px;
  
  :deep(.el-card__header) {
    padding: 16px 20px;
    border-bottom: 2px solid #f0f2f5;
  }
  
  :deep(.el-card__body) {
    padding: 20px;
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  
  .el-icon {
    font-size: 18px;
  }
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 权限树 */
.permission-tree {
  :deep(.el-tree-node__content) {
    height: auto;
    min-height: 44px;
    padding: 8px 0;
    border-bottom: 1px solid #f5f7fa;
    
    &:hover {
      background-color: #f5f7fa;
    }
  }
  
  :deep(.el-tree-node__expand-icon) {
    font-size: 16px;
    color: #606266;
  }
  
  :deep(.el-tree-node:focus > .el-tree-node__content) {
    background-color: #f5f7fa;
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0;
  min-height: 32px;
}

.node-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  max-width: 50%;
}

.type-tag {
  flex-shrink: 0;
  font-weight: 500;
  
  .tag-icon {
    margin-right: 4px;
    vertical-align: middle;
  }
}

.node-name {
  font-weight: 500;
  font-size: 14px;
  color: #303133;
  white-space: nowrap;
}

.code-tag {
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 12px;
}

.node-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  min-width: 0;
}

.path-info,
.api-info,
.desc-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.info-icon {
  font-size: 14px;
  color: #909399;
  flex-shrink: 0;
}

.info-text {
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.api-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.method-tag {
  font-weight: 600;
  min-width: 60px;
  text-align: center;
  font-size: 11px;
}

.api-path {
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 12px;
  color: #606266;
  background: #f5f7fa;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.desc-text {
  font-style: italic;
  color: #909399;
  font-size: 12px;
}

/* 说明卡片 */
.info-card {
  :deep(.el-card__header) {
    padding: 16px 20px;
    background: #f5f7fa;
  }
  
  :deep(.el-card__body) {
    padding: 24px;
  }
}

.permission-info {
  .info-section {
    h4 {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0 0 12px 0;
      font-size: 15px;
      font-weight: 600;
      color: #303133;
      
      .el-icon {
        font-size: 16px;
      }
    }
    
    ul {
      margin: 0;
      padding-left: 0;
      list-style: none;
      
      li {
        margin: 8px 0;
        padding-left: 20px;
        color: #606266;
        line-height: 1.6;
        position: relative;
        
        &::before {
          content: '•';
          position: absolute;
          left: 6px;
          color: #909399;
        }
        
        .el-tag {
          margin-right: 8px;
          vertical-align: middle;
          
          .el-icon {
            margin-right: 4px;
            vertical-align: middle;
          }
        }
        
        span {
          vertical-align: middle;
        }
      }
    }
  }
}

/* 响应式 */
@media screen and (max-width: 1400px) {
  .custom-tree-node {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .node-left {
    max-width: 100%;
  }
  
  .node-right {
    align-items: flex-start;
    width: 100%;
  }
}
</style>

